<template>
    <div class="column-detail-page mb-3 w-75 mx-auto">
        <div class="column-info row mb-4 border-bottom pb-4 align-items-center">
            <div class="col-3 text-center">
                <img :src="column?.avatar && column?.avatar.fitUrl" class="rounded-circle border w-50"
                    :alt="column?.title">
            </div>
            <div class="col-9">
                <div class="card-body">
                    <h4 class="card-title">{{ column?.title }}</h4>
                    <p class="card-text">{{ column?.description }}</p>
                </div>
            </div>
        </div>
        <PostList :list="list"></PostList>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed } from 'vue'
import PostList from '@/components/PostList.vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ColumnProps, GlobalDataProps } from '../store'
import { addColumnAvatar } from '@/helper'
// import { testData, testPosts } from '@/testData'
export default defineComponent({
    name: 'ColumnDetail',
    components: {
        PostList
    },
    setup() {
        const store = useStore<GlobalDataProps>()
        const route = useRoute()
        // 将路由传进来的id（即点击的相关专栏的id传进来）保存到currentId中，但要注意传进来的是字符串，前面加一个加号是为了将字符串转为数字
        const currentId = route.params.id
        onMounted(() => {
            store.dispatch('fetchColumn', currentId)
            store.dispatch('fetchPosts', currentId)
        })
        // 创建一个变量column，在store.state.column中找到与传进来的专栏id匹配的专栏，用方法find,具体方法可在store.ts的getters中看
        const column = computed(() => {
            const selectColumn = store.getters.getColumnById(currentId) as ColumnProps | undefined
            if (selectColumn) {
                addColumnAvatar(selectColumn, 100, 100)
            }
            return selectColumn
        })
        // 创建一个变量post，在postData中的colummnId和点进的专栏id相匹配，用方法filter
        const list = computed(() => store.getters.getPostById(currentId))
        return {
            route,
            column,
            list
        }
    }
})
</script>
